<template>
    <div class="index">
        <div class="taskBox" @mouseup="handleMouseUp">
            <el-button v-if="taskTypeList.length == 0" @click="showPane = true; taskType = {}" type="primary" plain
                icon="Plus">增加面板</el-button>
            <div class="taskItem" v-for="item in taskTypeList" :key="item.id" @dragover="allowDrop">
                <div class="taskItemHead" :style="'background-color:' + item.taskHeaderColor">
                    <div class="taskItemHeadLeft">{{ item.taskHeaderName }}</div>
                    <div class="taskItemHeadRight">
                        <el-button @click="delTaskType(item.id)" size="small" icon="Delete" circle></el-button>
                        <el-button @click="showPane = true; taskType = {}" size="small" icon="Plus" circle>
                        </el-button>
                    </div>
                </div>

                <div class="taskItemContent" @drop="drop" :data-tasktypeid="item.id" :id="'taskType' + item.id">
                    <div @dblclick="editTask(task)" :id="'task' + task.id" draggable="true" @dragend="dragEnd"
                        v-for="task in item.taskList" :key="task" class="card"
                        :style="'background-color:' + item.taskHeaderColor + '33'" :data-taskId="task.id"
                        :data-tasktypeid="item.id">
                        <div class="cardHeader">
                            <div>{{ task.taskTitle }}</div>
                            <el-button @click="delTask(task.id)" round plain type="danger" size="small" icon="Delete">删除
                            </el-button>
                        </div>
                        <div class="cardContent">
                            {{ task.taskContent }}
                        </div>
                        <div class="cardFooter">
                            {{ task.createTime }}
                        </div>
                    </div>
                    <el-button @click="preAddTask(item.id)" icon="Plus" plain type="primary"
                        style="width:calc(100% - 20px); margin:10px;">添加任务</el-button>
                </div>
            </div>
        </div>
        <el-dialog title="面板信息" v-model="showPane">
            <el-form :model="taskType" label-width="120px">
                <el-form-item label="面板名称">
                    <el-input placeholder="输入面板名称" v-model="taskType.taskHeaderName"></el-input>
                </el-form-item>
                <el-form-item label="面板头部颜色">
                    <el-input placeholder="面板头部颜色" v-model="taskType.taskHeaderColor"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" @click="showPane = false">取消</el-button>
                    <el-button @click="addTaskType" type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="任务信息" v-model="showTask">
            <el-form :model="task">
                <el-form-item label="任务标题">
                    <el-input placeholder="输入任务标题" v-model="task.taskTitle"></el-input>
                </el-form-item>
                <el-form-item label="任务内容">
                    <el-input type="textarea" placeholder="输入任务标题" v-model="task.taskContent"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" @click="showTask = false">取消</el-button>
                    <el-button v-if="isTaskAdd" @click="addTask" type="primary">提交</el-button>
                    <el-button v-if="!isTaskAdd" @click="addTask" type="primary">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { addTaskType, taskTypeList, delTaskType, addTask, setTask, delTask } from '../js/api.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import draggable from "vuedraggable"
export default {
    components: {
        draggable
    },
    data() {
        return {
            showPane: false,
            showTask: false,
            taskType: {},
            taskTypeList: [],
            task: {},
            list: [],
            tempTaskTypeId: null,
            isTaskAdd: true
        }
    },
    methods: {
        addTaskType() {
            addTaskType(this.taskType).then(res => {
                ElMessage({ type: res.status ? 'success' : 'error', message: res.msg })
                this.showPane = false;
                this.getTaskTypeList();
            })
        },
        getTaskTypeList() {
            taskTypeList().then(res => {
                this.taskTypeList = res.data;
            })
        },
        delTaskType(id) {
            ElMessageBox.confirm('该操作将删除该面板以及里面的所有任务，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(() => {
                delTaskType([id]).then(res => {
                    ElMessage({ type: res.status ? 'success' : 'error', message: res.msg });
                    this.getTaskTypeList();
                })
            })
        },
        delTask(id) {
            ElMessageBox.confirm('该操作将删除该任务，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(() => {
                delTask([id]).then(res => {
                    ElMessage({ type: res.status ? 'success' : 'error', message: res.msg });
                    this.getTaskTypeList();
                })
            })
        },
        preAddTask(taskTypeId) {
            this.task - {};
            this.task.taskTypeId = taskTypeId;
            this.isTaskAdd = true;
            this.showTask = true;
        },
        addTask() {
            if (this.isTaskAdd) {
                addTask(this.task).then(res => {
                    ElMessage({ type: res.status ? 'success' : 'error', message: res.msg });
                    this.showTask = false;
                    this.getTaskTypeList();
                })
            } else {
                setTask(this.task).then(res => {
                    ElMessage({ type: res.status ? 'success' : 'error', message: res.msg });
                    this.showTask = false;
                    this.getTaskTypeList();
                })

            }
        },
        allowDrop(event) {
            event.preventDefault();
        },
        drop(event) {
            this.tempTaskTypeId = document.getElementById(event.target.id).dataset.tasktypeid;
            event.preventDefault();
        },
        dragEnd(event) {
            let taskId = document.getElementById(event.target.id).dataset.taskid;
            console.log(taskId)
            let oldTask = null;
            for (let i = 0; i < this.taskTypeList.length; i++) {
                let tempTaskList = this.taskTypeList[i].taskList;
                for (let j = 0; j < tempTaskList.length; j++) {
                    if (taskId == tempTaskList[j].id) {
                        oldTask = tempTaskList[j];
                        break;
                    }
                }
            }
            oldTask.taskTypeId = this.tempTaskTypeId;
            setTask(oldTask).then(res => {
                ElMessage({ type: res.status ? 'success' : 'error', message: res.msg });
                this.getTaskTypeList();
            })
            console.log(oldTask);
        },
        editTask(task) {
            this.isTaskAdd = false;
            this.showTask = true;
            this.task = task;
        }

    },
    mounted() {
        this.getTaskTypeList();
    }
}
</script>
<style lang="scss">
.index {
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: whitesmoke;
}

.taskBox {
    display: flex;
    justify-content: center;
}

.taskItem {
    width: 300px;
    height: calc(100vh - 200px);
    border: 1px solid gainsboro;
    border-radius: 5px;
    margin: 0 10px;
    box-shadow: 2px 3px 10px gainsboro;
}

.taskItemHead {
    width: 100%;
    height: 40px;
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: white;
    justify-content: space-between;
}

.taskItemHeadLeft {
    padding-left: 10px;
    display: flex;
    justify-content: center;
}

.taskItemHeadRight {
    display: flex;
    align-items: center;
    padding-right: 10px;
    cursor: pointer;
}

.taskItemContent {
    height: calc(100vh - 240px);
    overflow-y: auto;
}

.card {
    margin: 10px;
    cursor: pointer;
    box-shadow: 2px 3px 10px gainsboro;
    text-align: left;
    padding: 5px;
    border-radius: 4px;
}

.cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 16px;

}

.cardContent {
    padding: 10px 0;
}

.cardFooter {
    padding-top: 5px;
    font-size: 14px;
}
</style>